<div class="comment-list m-y-sm relative">
  @if (comments?.length) {
    <div class="comment-count p-y-xs p-x-sm justify-between items-center">
      @if (content.comment?.title) {
        <span class="bold flx-[0_1_100%]">{{ content.title }}</span>
      }
      <span class="bold flx-[0_1_100%] {{ content.comment?.title ? 'text-right' : '' }}"
        >{{ comments?.length }}个回复</span
      >
    </div>
    @if (comments) {
      <app-comment-item [comments]="comments" [content]="content" />
    }
  } @else {
    <div class="empty p-y flex flex-col justify-center items-center">
      <app-icon [content]="{ name: 'create', inline: true }" />
      <p [innerHTML]="content.editor?.empty?.label || '暂时没有人回复!' | safeHtml"></p>
    </div>
  }
  <ng-template #empty>
    <div class="empty p-y flex flex-col justify-center items-center">
      <app-icon [content]="{ name: 'create', inline: true }" />
      <p [innerHTML]="content.editor?.empty?.label || '暂时没有人回复!' | safeHtml"></p>
    </div>
  </ng-template>
</div>
